﻿@{
    Layout = "~/Views/Shared/_Layout_RTU_well.cshtml";
    ViewBag.Title = "历史曲线";
}
<div class="xds-no-breadcrumb">
    <div class="full-height">
        <div class="full-height-scroll white-bg border-left">
            <div class="row border-bottom page-heading" style="padding:0 20px 10px 20px">
                <div class="row">
                    <div class="col-sm-3">
                        <h2 style="float:left">历史曲线</h2>
                    </div>
                    <div class="col-sm-5">
                        <label class="font-noraml">选择时间段：</label>
                        <div class="form-group" id="data_5">
                            <div class="input-daterange input-group" id="datepicker">
                                <input type="text" class="input-sm form-control" name="start" id="startdate" />
                                <span class="input-group-addon">到</span>
                                <input type="text" class="input-sm form-control" name="end" id="enddate" />
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <label class="font-noraml">选择曲线参数：</label>
                        <div class="form-group">
                            <select id="Options" style="margin-top:4px">
                                <option></option>
                            </select>
                            <button type="button" onclick="huizhi()" class="btn btn-w-m btn-primary" style="float:right;">绘制</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrapper wrapper-content animated fadeInRight ecommerce">
                <div id="main" style="display:none;"></div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    @Styles.Render("~/plugins/dataPickerStyles")
    @Styles.Render("~/plugins/sweetAlertStyles")
}

@section Scripts {
    @Scripts.Render("~/plugins/dataPicker")
    @Scripts.Render("~/bundles/echarts")
    @Scripts.Render("~/plugins/sweetAlert")
    <script type="text/javascript">
        var date = [];
        var data = [];
        var worldMapContainer = document.getElementById('main');
        var myChart = echarts.init(worldMapContainer);
        $(document).ready(function () {
            GetOptions();
            $("#startdate").attr("value", new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate());
            $("#enddate").attr("value", new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate());
            $('#data_5 .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });
            $("#Options").change(function () {
                sessionStorage.parameter = $('#Options option:selected').text();
            });
        })
        function GetOptions() {
            $("#Options").empty();
            var url = "/Line/Parameter";
            $("<option></option>")
            .val("0")
            .text("请选择-")
            .appendTo($("#Options"));
            $.getJSON(url, function (data) {
                $.each(data.data, function (i, item) {
                    $("<option></option>")
                    .val(i)
                    .text(item)
                    .appendTo($("#Options"));
                });
            });
        }
        function huizhi() {
            date = [];
            data = [];
            if (sessionStorage.parameter == null) {
                swal({
                    title: "Welcome in Alerts!",
                    text: "Please select curve parameters."
                });
            } else {
                $.ajax({
                    url: '/Line/HistoryLineData',
                    data: { wellid: sessionStorage.wellid, parameter: sessionStorage.parameter, starttime: $("#startdate").val() + " 00:00:00", endtime: $("#enddate").val() + " 23:59:59" },
                    type: 'post',
                    async: false,
                    dataType: 'json'
                }).success(function (result) {
                    $.each(result.data, function (i, item) {
                        date.push(item["Key"]);
                        data.push(item["Value"]);
                    });
                    sessionStorage.unit = result.unit;
                    showcharts();
                }).error(function () {
                    swal({
                        title: "Welcome in Alerts!",
                        text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                    });
                });
            }
        }
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                boundaryGap: [0, '100%'],
                type: 'value'
            },
            series: [
                {
                    name: '成交',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    stack: 'a',
                    data: data
                }
            ]
        };

        function showcharts() {
            $("#main").show()
            resizeWorldMapContainer();
            myChart.resize();
            myChart.setOption({
                xAxis: {
                    data: date
                },
                yAxis: {
                    name: '' + sessionStorage.parameter + '（' + sessionStorage.unit + '）'
                },
                title: {
                    text: sessionStorage.parameter
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        params = params[0];
                        return params.name + ' : ' + params.value;
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 10
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [{
                    name: sessionStorage.parameter,
                    data: data
                }]
            });
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeWorldMapContainer = function () {
            worldMapContainer.style.width = $("#page-wrapper").width() + 'px';
            worldMapContainer.style.height = document.documentElement.clientHeight - 200 + 'px';
        };
        //用于使chart自适应高度和宽度
        window.onresize = function () {
            //重置容器高宽
            resizeWorldMapContainer();
            myChart.resize();
        };
    </script>
}
